<template>
	<el-dialog title="环境选择" :visible.sync="dialogVisible" width="900px" @close="handleClose"
		:close-on-click-modal="false" append-to-body>
		<div slot="title" class="dialog-header-title">
			<i class="el-icon-edit-outline"></i>
			<span>环境选择</span>
		</div>
		<div class="smp-search">
			<el-form :inline="false" label-width="80px" size="mini" ref="form" :model="form.body">

				<el-row>
						<el-col :span="9">
							<el-form-item label="所属系统:" prop="systemNo">
								<el-select v-model="form.body.systemNo" disabled style="width: 100%" 
									placeholder="请输入系统编号或名称" >
									<el-option v-for="item in systemListAll" :key="item.systemNo" :label="item.systemName"
										:value="item.systemNo">
										<span style="float: left;margin-left: 3px;">{{ item.systemNo }}</span>
										<span style="float: right;margin-right: 3px;">{{ item.systemName }}</span>
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						
						<el-col :span="9">
							<el-form-item label="环境类型:" prop="envirType">
								<el-select v-model="form.body.envirType" style="width: 100%" placeholder="环境类型" >
									<el-option v-for="item in dict('SMP0026')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						
						<el-col :span="6">
							<el-form-item style="text-align: center;" label-width="0px">
								<el-button size="mini" type="primary" @click="getList">查询</el-button>
								<el-button size="mini" style="text-align: left;" @click="clear">清空</el-button>
							</el-form-item>
						</el-col>
				</el-row>
			</el-form>
			
			
		</div>
		
		<div class="smp-result">
			<el-table :data="list" size="mini" stripe border style="width: 100%">
		        <el-table-column prop="systemNo" label="系统名称" align="center" >
					<template slot-scope="scope">
						{{scope.row.systemNo|getSystemName}}({{scope.row.systemNo}})
					</template>
				</el-table-column>
				<el-table-column prop="hostName" label="主机名称" align="center" />
				<el-table-column prop="systemCurrentAddr" label="系统环境" align="center" />
 				<el-table-column prop="envirType" label="环境类型" align="center">
					<template slot-scope="scope">
						{{scope.row.envirType|dictName("SMP0026")}}
					</template>
				</el-table-column>
				<el-table-column prop="esbAddr" label="ESB环境" align="center">
					<template slot-scope="scope">
						<!-- {{scope.row.esbAddr|dictName("SMP0016")}} -->
						{{scope.row.esbAddr|getESBEnvironment(that)}} 
					</template>
				</el-table-column>
				<el-table-column prop="status" label="环境状态" align="center" width="80">
					<template slot-scope="scope">
						{{scope.row.status|dictName("SMP0027")}}
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="80">
					<template slot-scope="scope">
						<el-link
							size="mini"
							type="primary"
							:underline="false"
							style="font-size: 12px;"
							@click="handleChange(scope.$index, scope.row)">选择</el-link>
					</template>
				</el-table-column>

			</el-table>
		</div>
		
		<!-- <span slot="footer" class="dialog-footer">
			<el-button size="mini" type="primary" @click="onSubmit">提交</el-button>
			<el-button size="mini" @click="closeDialog">取消</el-button>
		</span> -->
		
		<div class="smp-pagination">
			<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper" :page-size="form.pageSize"
				:page-sizes="[10,15,20]" :total="total" :current-page="form.pageNum" @current-change="currentChange"
				@size-change="sizeChange">
			</el-pagination>

		</div>
	</el-dialog>
</template>

<script>
	"use strict";
	import {getEnvironmentInfoByPageNew,getEsbEnvironmentByEsbFlg } from '@/api/environment.js';
	
	export default {

		data() {
			return {
				esbEnvironmentList: [],
				
				total: 0,
				dialogVisible:false,
				list: [],
				that:this,

				form: {
					body: {
						systemNo: '',
						envirType: '',
						status: '01',
					},
					pageNum: 1,
					pageSize: 10
				},		
			};
		},

		created() {
			this.getEsbEnvironmentList();
			this.getList();
		},
		
		
		filters: {
			getESBEnvironment: function(ip,that) {
			
				let esbEnvironment =  that.esbEnvironmentList.filter(item=>item.ip==ip)[0];
				return esbEnvironment.ip +"(" + that.dictName(esbEnvironment.esbFlg,'SMP0031') +")";
			}
		},

		methods: {
			
			getEsbEnvironmentList() {
				getEsbEnvironmentByEsbFlg({}).then(response => {
					this.esbEnvironmentList = response.data.extend;
				})
			},

			getList() {
				getEnvironmentInfoByPageNew(this.form).then(response => {
					this.list = response.data.extend.list
					this.total = response.data.extend.total;

				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},

			currentChange(val) {
				this.form.pageNum = val;
				this.getList();
			},
			
			sizeChange(val) {
				this.form.pageSize = val;
				this.form.pageNum = 1;
				this.getList();
			},
			
			clear(){
				this.reset();
			},
			
			closeDialog(){
				this.reset();
				this.dialogVisible = false;
			},
			
			handleClose(){
				this.reset();
				this.dialogVisible = false;
				this.$emit("resetServer");
			},
			
			showDialog(systemNo) {
				let system = this.$store.getters.getSystem(systemNo);
				 Object.assign(this.form.body,system);
				// this.form.body.systemNo=systemNo;
				this.getList();
				this.dialogVisible = true;
			},
			
			handleChange(index,row){
				this.reset();
				this.list=[];
				this.dialogVisible = false;
				this.$emit("maintainEnvir",row);
			},

		},


	}
</script>

<style>
</style>
